<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	template="../Template/Template.xhtml"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:fmt="http://java.sun.com/jsp/jstl/fmt">

	<ui:define name="title">
    Trang chủ
  	</ui:define>

	<ui:define name="content">
		<div id="MainPanel" align="left">

			<div class="ContentPart">
				<h1 class="ContentPartTitle" align="center">TRANG CHỦ</h1>
			</div>

			<div class="ContentPart">
				<div class="ContentPartContent">

						<div class="ins">Số sản phẩm sẽ hiển thị:</div>
						<div class="Filter">
							<label for="cbbSoSanPham">Nhóm SP:</label>
							<h:selectOneMenu name="cbbSoSanPham" id="cbbSoSanPham"
								class="combobox" value="#{trangChuBean.soLuongHienThi}">
								<f:selectItem itemValue="10" itemLabel="10" />
								<f:selectItem itemValue="20" itemLabel="20" />
								<f:selectItem itemValue="30" itemLabel="30" />
								<f:selectItem itemValue="40" itemLabel="40" />
								<f:ajax listener="#{trangChuBean.changeSoLuongHienThiListener}"
									render="contentDanhSach" />
							</h:selectOneMenu>
						</div>
				</div>
			</div>
			<!-- 
			<div id="PhanTrang">
				Trang
				<c:forEach var="i" begin="0"
					end="#{trangChuBean.XacDinhSoTrang(20) - 1}">				
	        &#160; &#160; &#160; &#160;
	        
	        <h:link value="#{i + 1}" outcome="TrangChu?faces-redirect=true">
						<f:param name="thututrang" value="${i + 1}"
							action="#{trangChuBean.LaySanPhamTheoThuTuTrang()}" />
					</h:link>
				</c:forEach>
			</div> -->
			<h:panelGroup id="contentDanhSach">
				<div class="ContentPart">
					<h3 class="ContentPartHeader">Sản phẩm mới nhất</h3>
					<div class="ContentPartContent">
						<div class="boxContainer" align="center">
							<ui:repeat value="#{trangChuBean.lstSanPhamMoiNhat}"
								var="sanpham">
								<!-- <section> -->
								<div class="productBox">
									<div class="productName">
										<h2 align="center">
											<h:commandLink
												action="#{trangChiTietSanPhamBean.ShowSanPham(sanpham)}">
												<h:outputText value="#{sanpham.tensanpham}" />
											</h:commandLink>
										</h2>
									</div>

									<h:commandLink
										action="#{trangChiTietSanPhamBean.ShowSanPham(sanpham)}">
										<f:param name="masanpham" value="#{sanpham.masanpham}"
											action="#{trangChiTietSanPhamBean.LaySanPhamTheoMaSP()}" />
										<img class="productImage imgNoBackgroundBorder" align="middle"
											src="../Images/Products/#{sanpham.hinhanh}" />
									</h:commandLink>

									<p class="productIntro">
										<h:outputText value="#{sanpham.mota}" />
									</p>
									<div>
										<h:commandButton class="buttonLink button viewDetailButton"
											action="#{trangChiTietSanPhamBean.ShowSanPham(sanpham)}"
											value="Xem" />

										<h:outputText class="productPrice" value="#{sanpham.giaban}">
											<f:convertNumber groupingUsed="true" pattern="#0,000" />
										</h:outputText>
										VNĐ


										<h:commandLink process="@this" immediate="true"
											class="smallCartIcon"
											action="#{gioHangBean.ThemSanPham(sanpham.masanpham)}">
											<img class="smallCartIcon imgNoBackgroundBorder"
												src="../Images/green_cart.png" align="right" />
										</h:commandLink>

									</div>
									<!-- </section> -->
								</div>
							</ui:repeat>
						</div>

					</div>
				</div>

				<!-- Bán chạy nhất -->

				<div class="ContentPart">
					<h3 class="ContentPartHeader">Sản phẩm Bán chạy nhất</h3>
					<div class="ContentPartContent">
						<div class="boxContainer" align="center">
							<ui:repeat value="#{trangChuBean.lstSanPhamBanChayNhat}"
								var="sanpham">
								<!-- <section> -->
								<div class="productBox">
									<div class="productName">
										<h2 align="center">
											<h:commandLink
												action="#{trangChiTietSanPhamBean.ShowSanPham(sanpham)}">
												<h:outputText value="#{sanpham.tensanpham}" />
											</h:commandLink>
										</h2>
									</div>

									<h:commandLink
										action="#{trangChiTietSanPhamBean.ShowSanPham(sanpham)}">
										<f:param name="masanpham" value="#{sanpham.masanpham}"
											action="#{trangChiTietSanPhamBean.LaySanPhamTheoMaSP()}" />
										<img class="productImage imgNoBackgroundBorder" align="middle"
											src="../Images/Products/#{sanpham.hinhanh}" />
									</h:commandLink>

									<p class="productIntro">
										<h:outputText value="#{sanpham.mota}" />
									</p>
									<div>
										<h:commandButton class="buttonLink button viewDetailButton"
											action="#{trangChiTietSanPhamBean.ShowSanPham(sanpham)}"
											value="Xem" />

										<h:outputText class="productPrice" value="#{sanpham.giaban}">
											<f:convertNumber groupingUsed="true" pattern="#0,000" />
										</h:outputText>
										VNĐ


										<h:commandLink process="@this" immediate="true"
											class="smallCartIcon"
											action="#{gioHangBean.ThemSanPham(sanpham.masanpham)}">
											<img class="smallCartIcon imgNoBackgroundBorder"
												src="../Images/green_cart.png" align="right" />
										</h:commandLink>

									</div>
									<!-- </section> -->
								</div>
							</ui:repeat>
						</div>

					</div>
				</div>
			</h:panelGroup>
		</div>
	</ui:define>
</ui:composition>

